@extends('layouts.default')
@section('main')
    <link rel="stylesheet" href="/css/uniform.css" />
    <link rel="stylesheet" href="/css/select2.css" />

    <script type="text/javascript" src="{{URL::asset('js/')}}/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/hightcharts/highcharts.js"></script>
    <script src="{{URL::asset('js/My97DatePicker/')}}/WdatePicker.js"></script>

    <script>
        //初始函数，设置定时器，定时取数据
        $(function () {
            queryDayRegData();
        });
        //性别饼图 属性
        var genderOptions = {
            chart: {
                renderTo:'genderCon',
                type:'pie'
            },
            title: {
                text: '会员性别分布统计'
//            x: -20 //center
            },

            series: [{
                color : "#f7a35c",
                name:'会员性别分布统计'
            }],
//        tooltip: {
//            crosshairs: [{
//                width: 3,
//                color: 'green'
//            }, {
//                width: 3,
//                color: 'green'
//            }],
//
//            valueSuffix: '次'
//        },

//        credits:{
//            // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
//            text:'无界投融',               // 显示的文字
//            href:'',   // 链接地址
//            position:{                          // 位置设置
//                align: 'left',
//                x: 1050,
//                verticalAlign: 'bottom',
//                y: -30
//            },
//            style: {                            // 样式设置
//                cursor: 'pointer',
//                color: 'blue',
//                fontSize: '10px'
//            }
//        },


            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            }

//        series: [{
//            type: 'pie',
//            name: 'Browser share',
//            data: [
//                ['Firefox',   45.0],
//                ['IE',       26.8],
//                {
//                    name: 'Chrome',
//                    y: 12.8,
//                    sliced: true,
//                    selected: true
//                },
//                ['Safari',    8.5],
//                ['Opera',     6.2],
//                ['Others',   0.7]
//            ]
//        }]

        };

        var genderCategories = [];
        var genderDatas = [];

        //Ajax 获取数据并解析创建Highcharts图表
        function queryDayRegData() {


            $.ajax({
                url:'/userstatistic/gender',
                dataType:"json",
                success:function(data) {
                    var genderDatas= [];

                    $.each(data,function(i,n){
//                    monthLogCategories[i] = n[0];
//                    alert(i)
                        console.log(n);
                        genderDatas.push([i, n*1]);
//                    genderDatas[i] = [i, n[1]];
                    });

                    console.log(genderDatas);

                    genderOptions.series[0].data = genderDatas;
                    chart = new Highcharts.Chart(genderOptions);
                }
            });



        }

    </script>
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a href="{{url('home')}}" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a>
            </div>
        </div>
        <div class="container-fluid">
            <div class="widget-title">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab1">性别分布</a></li>

                </ul>
            </div>

            <div class="widget-content tab-content">
                <div id="tab1" class="tab-pane active">
                    <div>

                        <div id="genderCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                    </div>
                </div>


            </div>
        </div>


    </div>
    <script src="/js/matrix.tables.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/common.js"></script>
    <script>



    </script>

@stop
